<template>
    <div>
        <div class="game_flyleaf"></div>

        <div class="game_main">
            <div class="game_panel">
                <div class="scope">scope:{{scope}}</div>

                <div class="game_area" @keypress.space="bulletSend">
                    <div class="panel_spider"></div>
                    <div class="plane">
<!--                        <img width="24" height="24" src="../../assets/fly/fly.png" alt="">-->
                        <p>游戏结束~，还没做好的说。。</p>
                    </div>
                    <div v-if="!start"
                         style="position:absolute;width: 100%;height: 100%;background-color: darkslategray">
                        <div style="position:absolute;width:120px;height:70px;background-color: black;opacity: .6;
                        border-radius: 7px;color: white;font-size: 35px;padding: 23px;top:300px;left: 40%;cursor: pointer"
                             @click="startGame()">开始
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "GameFlyWar",
        data() {
            return {
                scope: 0,
                start: false,
                bulletTop:425
            }
        },
        created() {
            this.hideMenu()
        },

        methods: {
            startGame() {
                this.start = true;
                this.scope=100;//临时的设置
                window.addEventListener('keydown', this.planeMove);
            },
            hideMenu() {
                this.$store.commit('negate');
                $('.sidebar')
                    .sidebar('setting', 'transition', 'push')
                    .sidebar('hide');
            },
            planeMove(e) {
                let plane=$('.plane');
                let planeLeft=plane.offset().left+10;
                console.log('planeLeft:'+planeLeft);
                if(plane.css('left')>='0'&&plane.css('left')<='690'&&plane.css('top')<='426'&&plane.css('top')>'0'){
                    console.log(333);
                    if(e.code==='ArrowRight'){
                        plane.css('left',planeLeft);
                    }
                    if(e.code==='ArrowLeft'){
                        console.log(111);
                    }
                    if(e.code==='ArrowUp'){
                        console.log(111);
                    }
                    if(e.code==='ArrowDown'){
                        console.log(111);
                    }

                }

            },

        },
        destroyed() {
            window.removeEventListener('mousemove', this.handleMouseMove, true)
        },
    }

</script>

<style scoped>
    .game_main {
        width: 100vw;
        height: 80vh;
        background: #EE7752;
    }

    .game_flyleaf {
        height: 20vh;
        width: 100vw;
        background-color: #1f88be;
    }

    .scope {
        text-align: right;
        margin: 10px;
        color: white
    }

    .game_area {
        width: 700px;
        height: 450px;
        background-color: burlywood;
        position: absolute
    }

    .game_panel {
        width: 710px;
        background-color: gray;
        border: 5px solid #1e1f23;
        margin: auto;
    }

    .panel_spider {
        width: 680px;
        border: 2px solid lawngreen;
        margin: auto;
    }

    .plane {
        position: absolute;
        top: 425px;
        left: 338px;
    }
</style>
